import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Form, Input, InputNumber, Button ,Select, Row, Col, Icon, Breadcrumb, Upload, Tag, Message, Modal, Checkbox, Popover, Radio   } from 'antd';
import CostListModal from './roomModifyCostListModal'
import RoomResourceModify from './roomResourceModify'
const FormItem = Form.Item;
const Option = Select.Option;
const InputGroup = Input.Group;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;

var Reflux = require('reflux');
var HouseDecActions = require('./actions/houseDecActions');
var ConfirmCheckedStoreModify = require('./stores/confirmCheckedStoreModify'); // 已选中收费项store
var RoomTypeListStore = require('./stores/roomTypeListStore'); // 房间来源store

let Demo = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      roomDetailData:{},
      params:{},
      furnitureList:[], //
      visible: false,//弹框是否显示
      tags: [],
      tagkeys:[],
      id:'',// 房源id
      roomId:'',// 房间id
      checkedCostList:[], // 选中的收费项
      checkedCostNew: [], // 有classify
      confirmChecked:[],// 点击确定按钮后，选中的收费项

      costList:[], // 获取的收费项原始数据
      allCostList: [], // 重构收费项
      facilityList: [], //房间设施列表
      facilityListNew: [], // 新拼接的房间设施列表
      imgList:[], // 图片列表提交参数
      picList:[], // 图片列表显示参数
      roomTypeList:[], // 房间来源列表
      priviewVisible: false,
      priviewImage: '',
      baseFacility:[], // 基础设施
      commonFacility:[], // 公共设施
      orientation:'', // 房间朝向
      roomLabel: [], // 房间标签
      coverPic: [],//封面图片,
      coverPicList: []//封面图片展示列表
    }
  },
  componentDidMount(){
    this.getFurnitureList();
    this.getCostList();
    this.setState({
      id:this.props.location.state.tenementId,
      roomId:this.props.location.state.roomId
    });

    this.fetchRoomDetail(this.props.location.state.roomId);
  },

  //获取房间详细信息
  fetchRoomDetail(roomId){
    Utils.sendAjax({
      url: '/room/decorate/' + roomId,
      //data:JSON.stringify({"roomId":roomId}),
      callback:(result) => {
        if (result.code === '200') {
          let roomDetailData = result.data;
          let facilityListNew = this.getFacilityListNew(roomDetailData.facilityList);
          let coverPic = [];
          coverPic[0] = {url: roomDetailData.coverPic}
          this.getCheckedCostList(roomDetailData.costList);
          this.setState({
            roomDetailData: roomDetailData,
            costList: roomDetailData.costList,
            //confirmChecked: checkedCostList,
            facilityList: roomDetailData.facilityList,
            facilityListNew: facilityListNew,
            baseFacility: roomDetailData.baseFacility,
            roomLabel: roomDetailData.roomLabel,
            commonFacility: roomDetailData.commonFacility,
            orientation: roomDetailData.orientation
          });


          this.roomTypeList(roomDetailData.roomTypeList);
          this.getImgList(roomDetailData.picList);
          this.setImgUrl(roomDetailData.picList);
          if(coverPic[0].url !== ''){
            this.setCoverPic(coverPic)
          }
          
          //HouseDecActions.getFirstRoomTypeList({roomTypeList:roomDetailData.roomTypeList});
          let tags = this.state.tags;
          let tagkeys = this.state.tagkeys;


          roomDetailData.costList.map((item) => {
            let k = 0;
            let content = (
              <div style={{minWidth:300}}>
                {
                  item.length > 0 ?
                    <div>
                      <Row>
                        <Col span={6}>
                          阶梯开始
                        </Col>
                        <Col span={6}>
                          阶梯结束
                        </Col>
                        <Col span={6}>
                          单价
                        </Col>
                        <Col span={6}>
                          状态
                        </Col>
                      </Row>
                      {
                        item.ladderList.map(ladderListItem =>{
                          return (
                            <Row key = {`ladderList${k++}`}>
                              <Col span={6}>
                                {ladderListItem.ladderStart}
                              </Col>
                              <Col span={6}>
                                {ladderListItem.ladderEnd}
                              </Col>
                              <Col span={6}>
                                ￥{ladderListItem.price}
                              </Col>
                              <Col span={6}>
                                {ladderListItem.status == 1? '启用':'禁用'}
                              </Col>
                            </Row>
                          )
                        })
                      }
                    </div>

                    :<div>暂无阶梯收费详细信息</div>
                }
              </div>
            );
            let popover = (
              <span>
                {item.costName}:
                <Popover placement="right" content={content} title="阶梯收费" trigger="hover">
                  <a> 阶梯收费</a>
                </Popover>
              </span>
            )
            let labelText = item.chargeType != 2 ? (item.costName + (item.price ? item.price : 0) +'元/'+ item.unitName) : (popover);

            let obj = {
              key:'',
              name:''
            };

            obj.key = item.id.toString();
            obj.name = labelText;
            tags.push(obj);
            tagkeys.push(obj.key);
          });
          this.setState({
            tags:tags,
            tagkeys: tagkeys
          });
        } else {
          Message.error(result.message, 10);
        }
      }
    });

  },
  handleHidenModal(){
    this.setState({
      visible:false
    });
  },

  // checkedCostList 初始化构建
  getCheckedCostList(data){
    

    let arry = this.state.checkedCostList;
    
    if (data){
      data.forEach((item) => {
        if(item.id && arry.indexOf(item.id) == '-1'){

          arry.push(`${item.id}`)
        }
        if(item && typeof item != 'object' && arry.indexOf(item) == '-1' ){
          arry.push(`${item}`)
        }
        
      });
    }

    this.setState({
      checkedCostList: arry,
      confirmChecked: arry,

    });
    // 获取modal展示页checked数据
    this.getCheckedCostNew(arry,data);
  },

  // 用于modal数据展示
  getCheckedCostNew(data, costList){
    if(!costList){
      costList = this.state.costList
    }
    let checkedCostNew = {};
    let dataObj = {};
    let classify1 = [];
    let classify2 = {};
    let unit1 = [];
    let unit2 = [];
    let unit3 = [];
    if(costList){
      costList.forEach((item) => {
        if(data.indexOf(`${item.id}`) != -1){
          
          if(item.classify == '1'){ // 固定
            let id = `${item.id}`;
            
            classify1.push(id);
          }
          if(item.classify == '2'){ // 仪表
            if(item.unit == '1'){// 电费
              
              let id = `${item.id}`;
              
              unit1.push(id);
            }
            if(item.unit == '2'){// 水费
              let id = `${item.id}`;            
              unit2.push(id);
            }
            if(item.unit == '3'){// 天然气
              let id = `${item.id}`;            
              unit3.push(id);
            }
          }

        }
      })
    }
    classify2.unit1 = unit1;
    classify2.unit2 = unit2;
    classify2.unit3 = unit3;
    dataObj.classify1 = classify1;
    dataObj.classify2 = classify2;

    this.setState({
      checkedCostNew: dataObj
    });
  },

  


  // 图片提交参数重构
  getImgList(img){
    let imgList = [];
    img.forEach((item) => {
      let imgMaps = {
        type: item.type,
        url: item.url,
      };
      if (item.type == 'room') {
        imgList.push(imgMaps)
      }
    })
    this.setState({
      imgList: imgList,
    })
  },

  // 图片显示参数重构
  setImgUrl(img) {
    console.log(img)
    let picList = [];
    img.forEach((item) => {
      console.log(item)
      let length = item.url.split('/').length;
      let id = item.url.split('/')[length-1].split('.')[0];

      let imgMaps = {
        uid: id,
        type: item.type,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      if (item.type == 'room') {
        picList.push(imgMaps)
      }

    })
    this.setState({
      picList: picList,
    })
  },

  // 房屋类型列表拼接
  roomTypeList(roomTypeList){
      // 初次渲染时拼接好数据
      let params = this.state.roomTypeList;
      let k = 0;
      if(roomTypeList.length > 0) {
        roomTypeList.map(( item ) => {
          let  obj ={
            key:'',
            count:'',
            facilityName:'',
            facilityNid:'',
            type:2
          };
          obj.key = k++;
          obj.count = item.count;
          obj.facilityName = item.facilityName;
          obj.facilityNid = item.facilityNid;
          obj.type = item.type;
          params.push(obj);
        });
      }
    this.setState({
      roomTypeList:params
    });

  },

  // 获取房间设施列表
  getFurnitureList(){
    Utils.sendAjax({
      url: '/dict/list',
      data:JSON.stringify({"type":"furniture"}),
      callback:(result) => {
        if (result.code === '200') {
          let furnitureListData = result.data;
          furnitureListData.map((item) =>{
            item.count = 0;// 设置房间设施初始化数量为0
          });
          this.setState({
            furnitureList:furnitureListData
          });
        } else {
          Message.error(result.message, 10);
        }
      }
    });
  },



  /* **********************选择收费项弹框 S*********************/
  // 显示弹框
  showModal() {
    this.setState({
      visible: true,
           
    });
   // this.getCostList();
  },
  // 打开弹框时，获取收费项列表数据
  getCostList(){
    Utils.sendAjax({
      url:'/room/cost/list',
      data:JSON.stringify({}),
      callback:(result) => {
        if (result.code === '200') {
          let allCostList = this.getAllCostList(result.data);
          result.data.map((item) =>{
            item.id = item.id.toString();
          });
          this.setState({
            costList: result.data,
            allCostList: allCostList
          });
        } else {
          Message.error(result.message, 10);
        }
      }
    });
  },

  // 重构costList 分固定，仪表（水费、电费、天然气）
  getAllCostList(data){
    let dataObj = {};
    let classify1 = [];
    let classify2 = {};
    let unit1 = [];
    let unit2 = [];
    let unit3 = [];
    if(data){
      data.forEach((item) => {
        if(item.classify == '1'){ // 固定
          let id = `${item.id}`;
          let obj = {
            'label': item.costName,
            'value': id
          }
          classify1.push(obj);
        }

        if(item.classify == '2'){ // 仪表
          if(item.unit == '1'){// 电费
            
            let id = `${item.id}`;
            let obj = {
              'label': item.costName,
              'value': id
            }
            unit1.push(obj);
          }
          if(item.unit == '2'){// 水费
            
            let id = `${item.id}`;
            let obj = {
              'label': item.costName,
              'value': id
            }
            unit2.push(obj);
          }
          if(item.unit == '3'){// 天然气
            
            let id = `${item.id}`;
            let obj = {
              'label': item.costName,
              'value': id
            }
            unit3.push(obj);
          }
        }
        
      });
    }
    classify2.unit1 = unit1;
    classify2.unit2 = unit2;
    classify2.unit3 = unit3;
    dataObj.classify1 = classify1;
    dataObj.classify2 = classify2;

    return dataObj;
  },

  // 处理 facilityList
  getFacilityListNew(data){
    let facilityListNew = this.state.facilityListNew;
    let k = 0;
    data.forEach((item) => {
      let obj ={
        key:k++,
        count: `${item.count}`,
        facilityName:`${item.facilityName}`,
        facilityNid:`${item.facilityNid}`,
        type:`${item.type}`
      };
      facilityListNew.push(obj);
    });
    return facilityListNew;
  },

  // 获取房间设置的count
  getCount(e,val){
    let facilityListNew = this.state.facilityListNew;
    let id = e.id;
    let name = e.name;
    let flag = false;

    let key = parseInt(id.replace(/[^0-9]+/g, ''));
    // 寻找已有数据facilityList，查询是否存在key等于key的记录
    facilityListNew.map((item) =>{
      if(item.key ==  key){
        flag = true;
        item[name] = val;
      }

    });

    if(flag == false){// 不存在该条数据，则在数组params中追加一条数据
      obj[name] = val;
      obj.key = key;
      facilityListNew.push(obj);
    }
    this.setState({
      facilityListNew:facilityListNew
    })
  },


  // 从弹框中选中，并显示到表单中
  addCost(val) {
    let tags = [];
    let confirmChecked = val;
    let costList = this.state.costList;//已获取的所有收费项列表
    let obj = {
      key:'',
      name:''
    }

    let confirmCheckedArry = [];
    this.state.tags.forEach((item) =>{
      confirmCheckedArry.push(item.key);
    });

    if(confirmChecked.length > 0){ //confirmChecked有数据，将数据渲染到表单中
      confirmChecked.map((item) => {
        if(tags.length > 0 ){//tags有数据
          let flag = false;//设置标志，判断tags中是否已经已经存在选中的数据

          tags.map((tagsItem) => {
            if(tagsItem.key == item){ //判断tags中是否已存在选中的数据，如果没有，则追加到tags里；
              flag = true;
            }
          })
          if(flag == false){//tags中不存在已存在选中的数据
            costList.map((costListItem) => {
              let k = 0;
              let content = (
                <div style={{minWidth:300}}>
                  {
                    costListItem.ladderList.length > 0 ?
                      <div>
                        <Row>
                          <Col span={6}>
                            阶梯开始
                          </Col>
                          <Col span={6}>
                            阶梯结束
                          </Col>
                          <Col span={6}>
                            单价
                          </Col>
                          <Col span={6}>
                            状态
                          </Col>
                        </Row>
                        {
                          costListItem.ladderList.map(ladderListItem =>{
                            return (
                              <Row key = {`ladderList${k++}`}>
                                <Col span={6}>
                                  {ladderListItem.ladderStart}
                                </Col>
                                <Col span={6}>
                                  {ladderListItem.ladderEnd}
                                </Col>
                                <Col span={6}>
                                  ￥{ladderListItem.price}
                                </Col>
                                <Col span={6}>
                                  {ladderListItem.status == 1? '启用':'禁用'}
                                </Col>
                              </Row>
                            )
                          })
                        }
                      </div>

                      :<div>暂无阶梯收费详细信息</div>
                  }
                </div>
              );
              let popover = (
                <span>
                {costListItem.costName}：
                <Popover placement="right" content={content} title="阶梯收费" trigger="hover">
                  <a> 阶梯收费</a>
                </Popover>
              </span>
              )

              if(costListItem.id == item){

                let name = costListItem.chargeType != 2
                  ? (costListItem.costName + (costListItem.price ? costListItem.price : 0) +'元/'+ costListItem.unitName)
                  : (popover);

                obj= {
                  key:item,
                  name:name
                }
                tags.push(obj);
              }
            });

          }
        }else{//tags无数据
          costList.map((costListItem) => {
            let k = 0;
            let content = (
              <div style={{minWidth:300}}>
                {
                  costListItem.ladderList.length > 0 ?
                    <div>
                      <Row>
                        <Col span={6}>
                          阶梯开始
                        </Col>
                        <Col span={6}>
                          阶梯结束
                        </Col>
                        <Col span={6}>
                          单价
                        </Col>
                        <Col span={6}>
                          状态
                        </Col>
                      </Row>
                      {
                        costListItem.ladderList.map(ladderListItem =>{
                          return (
                            <Row key = {`ladderList${k++}`}>
                              <Col span={6}>
                                {ladderListItem.ladderStart}
                              </Col>
                              <Col span={6}>
                                {ladderListItem.ladderEnd}
                              </Col>
                              <Col span={6}>
                                ￥{ladderListItem.price}
                              </Col>
                              <Col span={6}>
                                {ladderListItem.status == 1? '启用':'禁用'}
                              </Col>
                            </Row>
                          )
                        })
                      }
                    </div>

                    :<div>暂无阶梯收费详细信息</div>
                }
              </div>
            );
            let popover = (
              <span>
                {costListItem.costName}：
                <Popover placement="right" content={content} title="阶梯收费" trigger="hover">
                  <a> 阶梯收费</a>
                </Popover>
              </span>
            )

            if(costListItem.id == item){
              let name = costListItem.chargeType != 2
                ? (costListItem.costName + (costListItem.price ? costListItem.price : 0) +'元/'+ costListItem.unitName)
                : (popover);
              obj= {
                key:item,
                name:name
              }
              tags.push(obj);
            }
          });
        }
      })
    }
    this.setState({
      tags:tags,
    });
  },
  // 关闭标签tag
  handleClose(key) {
    let tags = this.state.tags;
    tags = tags.filter(tag => (tag.key != key) && tag);
    let checkedCostList = this.state.checkedCostList;
    checkedCostList = checkedCostList.filter(checkedCostList => (checkedCostList != key) && checkedCostList);
    this.setState({
      tags: tags,
      checkedCostList: checkedCostList,
      confirmChecked: checkedCostList
    });
    this.getCheckedCostNew(checkedCostList);
  },
  /* **********************选择收费项弹框 S*********************/

  //  编辑房间请求
  add(param){
  let params = this.props.location.state;
    this.setState({
      loading: true
    });
    Utils.sendAjax({
      url:'/room/decorate/update',
      data:JSON.stringify(param),
      callback:(result) => {
        if (result.code === '200') {
          let goPathUrl = '/landlord/houseDecoration/list';
          this.context.router.push({pathname: goPathUrl, state: {...params}});

        } else {
          this.setState({
            loading: false
          });
          Message.error(result.message, 10);
        }
      }
    });
  },


  // 数据拼接
  getParams(){
    // 拼接房间设施数组 facilityList
    let obj  = {};
    let facilityList = {};
    let ArryFacilityList = [];
    obj = {
      count:'',
      facilityName:'',
      facilityNid:'',
      type:''
    };
    this.state.facilityListNew.map((item) =>{
      obj = {
        count:item.count,
        facilityName:item.facilityName,
        facilityNid:item.facilityNid,
        type:'1'
      };
      ArryFacilityList.push(obj)
    });
    facilityList.facilityList = ArryFacilityList;

    // 拼接消费项数组 costList
    let costList = {};
    let obj1 = {
      id:''
    }
    let arryCostList = [];
    this.state.confirmChecked.map((item) =>{
      obj1 = {
        id: item
      }
      arryCostList.push(obj1);
    });
    costList.costList = arryCostList;



    // 图片数组拼接 picList
    let picList = {};
    picList.picList = this.state.imgList;


    // 房间来源数组拼接 roomTypeList
    let roomTypeList = {};
    roomTypeList.roomTypeList = this.state.roomTypeList;

    let baseFacility = {};
    let commonFacility = {};
    let roomLabel = {};
    baseFacility.baseFacility = this.state.baseFacility;
    commonFacility.commonFacility = this.state.commonFacility;
    roomLabel.roomLabel = this.state.roomLabel;
    let coverPicList={};
    coverPicList.coverPic =this.state.coverPicList.length !==0 ?  this.state.coverPicList[0].url : '';

    let param = this.props.form.getFieldsValue();
    Object.assign(param,this.state.params, costList, facilityList, picList, coverPicList, roomTypeList, baseFacility, commonFacility, roomLabel );
    return param;
  },

  callBack(roomTypeList){
    this.setState({
      roomTypeList:roomTypeList
    });

  },
  handleImgCancel(){
    this.setState({
      priviewVisible:false
    });
  },
  handleSubmit(e){
    e.preventDefault();

    let param = this.getParams();
    console.log('param',param);
    this.add(param);
  },

  // 获取删除后 数据
  getList(list, url){
    let listIndex = '';
    list.forEach((item, index) => {
      if(item.url === url){
        listIndex = index;
      }
    });
    list.splice(listIndex, 1);
    return list
  },
  deleteImg(file){
    console.log(file)
   let picList = this.state.picList;
    let imgList = this.state.imgList;
    let coverPic = this.state.coverPic;
    let coverPicList = this.state.coverPicList;
    if(file.type){
       picList = this.getList(picList, file.url);
      imgList = this.getList(imgList, file.url);
    }else{
      coverPicList = this.getList(coverPicList, file.url);
    coverPic = this.getList(coverPic, file.url);
    }

    this.setState({
      picList: picList,
      imgList: imgList,
      coverPic: coverPic,
      coverPicList: coverPicList
    });
  },
setCoverPic(img) {
  let coverList = this.state.coverPicList;

  img.forEach((item)=> {
      let length = item.url.split('/').length ;
     let id =item.url.split('/')[length-1].split('.')[0] ;
      let imgMaps = {
        uid: id,
        status: 'done',
        url: Utils.apiServer + item.url,
        thumbUrl: Utils.apiServer + item.url,
      };
      coverList.push(imgMaps)
      console.log(coverList)
  })
    
  this.setState({
    coverPicList: coverList
  })
  console.log(coverList)
},
  // checkBox onChange
  onChangeCheckBox(obj,checkedValues){
    switch (obj.id){
      case 'baseFacility':
        this.setState({
          baseFacility:checkedValues
        });
        break;
      case 'commonFacility':
        this.setState({
          commonFacility:checkedValues
        });
        break;
      case 'roomLabel':
        this.setState({
          roomLabel:checkedValues
        });
    }
  },

  onChange(value){
   
  },

  render () {

    // 公共设施
    const commonOptions = [
      {label: "冰箱", value: "1"},
      {label: "洗衣机", value: "2"},
      {label: "沙发", value: "3"},
      {label: "餐桌", value: "4"},
      {label: "微波炉", value: "5"},
    ];

    // 基础设施
    const basicOptions = [
      {label: "飘窗", value: "1"},
      {label: "阳台", value: "2"},
      {label: "独卫", value: "3"},
      {label: "公卫", value: "4"},
      {label: "厨房", value: "5"},
      {label: "客厅", value: "6"},
      {label: "餐厅", value: "7"}
    ];

    // 房间标签
    const roomLabelOptions = [
      {label: "交通便利", value: "1"},
      {label: "购物便利", value: "2"},
      {label: "拎包入住", value: "3"},
      {label: "整租", value: "4"},
      {label: "合租", value: "5"},
      {label: "精装修", value: "6"},
      {label: "简装修", value: "7"},
    ];

    let roomDetailData = this.state.roomDetailData
    console.log(roomDetailData);
    const { getFieldProps } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const roomIdProps = getFieldProps('roomId', {
      initialValue: this.state.roomId
    });
    const roomNameProps = getFieldProps('roomName', {
      initialValue: roomDetailData.roomName,
      rules: [
        { required: true, message: '房间名称不能为空' },
      ],
    });
    const areaProps = getFieldProps('area', {
      initialValue: roomDetailData.area,
      rules: [
        { required: true, message: '房间面积不能为空' },
      ],
    });
    const rentProps = getFieldProps('rent', {
      initialValue: roomDetailData.rent

    });
    const tenementIdProps = getFieldProps('tenementId', {
      initialValue:this.state.id
    });
    const remarkProps = getFieldProps('remark', {
      initialValue: roomDetailData.remark
    });
    let orientation = this.state.orientation;
    console.log(orientation);
    if(orientation){
      orientation = this.state.orientation.toString()
    };

    const orientationProps = getFieldProps('orientation', {
      initialValue: orientation
    });
    
    const bedroomCountProps = getFieldProps('bedroomCount', {
      initialValue: roomDetailData.bedroomCount,
      
    });

    const hallCountProps = getFieldProps('hallCount', {
      initialValue: roomDetailData.hallCount,
    });

    const toiletCountProps = getFieldProps('toiletCount', {
      initialValue: roomDetailData.toiletCount,
    });

    const publishStatusProps = getFieldProps('publishStatus', {
      initialValue: `${roomDetailData.publishStatus}`
    });


    // 上传图片属性
    let _me = this;

     let coverProps  = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: false,
      fileList: this.state.coverPicList,
      beforeUpload(file) {
        console.log(file)
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      
      },
      
       onChange: function (files) {
        let coverPic = _me.state.coverPic;
        let status = files.file.status;
         let file = files.file;
         console.log(file)
          if(status == 'done'){
            coverPic.push({url: file.response.data[0]})
              
          }                
          if(files.fileList.length == coverPic.length) {
              _me.setCoverPic(coverPic)
          }
      },
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file)
      }
    };

    let uploadProps  = {
      name: 'file',
      data: {nid: 'tenement'},
      listType: 'picture-card',
      action: Utils.apiServer + '/img/uploadifySave',
      multiple: true,
      fileList: this.state.picList,
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isSize = file.size > 5242880 ? false : true;
        if (!isJPG) {
          Message.error('只能上传jpg、png图片文件哦！', 10);
          return isJPG
        }
        if (!isSize) {
          Message.error('你选择的图片过大！', 10);
          return isSize
        }
      },
      onChange: function (files) {

        let imgList = _me.state.imgList;
        let status = files.file.status;
         let file = files.file;
         console.log(file)
          if(status == 'done'){
            imgList.push({type: 'room', url: file.response.data[0]})
          }                
         console.log(imgList) 
         if(files.fileList.length == imgList.length) {
              _me.setImgUrl(imgList);
         }    
      },
         
      onPreview: (file) => {
        let arry = file.url.split('.')
        _me.setState({
          priviewImage: arry[0]+'_big.'+arry[1],
          priviewVisible: true,
        });
      },
      onRemove: (file) => {
        console.log(file)
        _me.deleteImg(file);
      }
    };

    const { tags } = this.state;
    const { facilityListNew } = this.state;
    let k = 0;
    return (
      <div className="form-group inner-content">
        <Form horizontal form={this.props.form} >
          <Input type="hidden" {...tenementIdProps}/>
          <Input type="hidden" {...roomIdProps}/>
          <FormItem
            {...formItemLayout}
            label="房间名称"
          >
            <Input type="text" {...roomNameProps} placeholder="" style={{width:200}}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="房间面积"
          >
            <Input type="text" {...areaProps} placeholder="" style={{width:200}}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="房间格局"
          >
            <InputNumber type="text" {...bedroomCountProps} min={0} max={10} defaultValue={1} placeholder=""  style={{width:50}} />
            &nbsp;&nbsp;室&nbsp;&nbsp;
            <InputNumber type="text" {...hallCountProps} min={0} max={10} defaultValue={1} placeholder=""  style={{width:50}}/>
            &nbsp;&nbsp;厅&nbsp;&nbsp;
            <InputNumber type="text" {...toiletCountProps} min={0} max={10} defaultValue={1} placeholder=""  style={{width:50}}/>
            &nbsp;&nbsp;卫&nbsp;&nbsp;
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="租金"
          >
            <Input type="text" {...rentProps} placeholder="" style={{width:200}}/>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="房间朝向"
          >
            <Select {...orientationProps}  placeholder="请选择房间朝向" style={{width:200}}>
              <Option value="1">朝东</Option>
              <Option value="2">朝南</Option>
              <Option value="3">朝西</Option>
              <Option value="4">朝北</Option>
            </Select>
          </FormItem>
          <FormItem 
            {...formItemLayout}
            label="房间标签"
          >
            <CheckboxGroup  options={roomLabelOptions} value={this.state.roomLabel} onChange={this.onChangeCheckBox.bind(this, {id: 'roomLabel'})}/>

          </FormItem>

          <FormItem
            {...formItemLayout}
            label="基础设施"
          >
            <CheckboxGroup  options={basicOptions} value={this.state.baseFacility} onChange={this.onChangeCheckBox.bind(this, {id: 'baseFacility'})}/>

          </FormItem>

          <FormItem
            {...formItemLayout}
            label="公用设施"
          >
            <CheckboxGroup options={commonOptions} value={this.state.commonFacility} onChange={this.onChangeCheckBox.bind(this, {id: 'commonFacility'})}/>

          </FormItem>
          {/** <FormItem
            {...formItemLayout}
            label="房间来源"
          >
            <RoomResourceModify ref="RoomResourceModify" roomTypeList={this.state.roomTypeList} callBack={this.callBack}/>
          </FormItem>*/}
          
          <FormItem
            {...formItemLayout}
            label="房间设施"
          >
            <ul>
              {facilityListNew.map(item =>
                <li className="fl-l furniture-group" key={k++}>
                  <div className="number-group">
                    <Input type="hidden" id="type" name="type"/>
                    <Input type="hidden" id="facilityNid" name="facilityNid" value={item.facilityNid}/>
                    <Input type="hidden" id="facilityName" name="facilityName" value={item.facilityName}/>
                    <span className="group-label">{item.facilityName}</span>
                    <InputNumber className="group-input"  id={`count${item.key}`} name="count" defaultValue={item.count} min={0} max={10000} onChange={this.getCount.bind(this, {id:`count${item.key}`,name:'count'})} />
                  </div>
                </li>
              )}

            </ul>
          </FormItem>


          <FormItem
            {...formItemLayout}
            label="收费项"
          >
            {tags.map(tag =>
              <Tag key={tag.key} closable={tag.key !== 1} afterClose={() => this.handleClose(tag.key)}>
                {tag.name}
              </Tag>
            )}
            <Button size="small" type="dashed" onClick={this.showModal}>选择收费项</Button>
            
            <CostListModal visible={this.state.visible}
                            costList={this.state.costList}
                            allCostList={this.state.allCostList}
                            checkedCostNew={this.state.checkedCostNew}
                            tagkeys = {this.state.tagkeys}
                            confirmChecked={this.state.confirmChecked}
                            getCheckedCostNew={this.getCheckedCostNew}
                            hideModal={this.handleHidenModal} 
                            getCheckedCostList={this.getCheckedCostList}
                            addCost={this.addCost}
                              />
            
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="上传封面图"
            className="pic-box"
          >
               <div className={this.state.coverPicList.length!==0 ? "form-group" : ''}>
              <div className={this.state.coverPicList.length!==0 ? "addPics" : ''}>
              <Upload disabled  {...coverProps}>
                <div className="img-icon">
                  <Icon type="plus" />
                  <h5>添加图片</h5>
                </div>
              
          </Upload>
          </div>
          </div>
            
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="上传房间详情图"
            className="pic-box"
          >
         <Upload disabled  {...uploadProps}>
         <div className="img-icon">
                <Icon type="plus" />
                <h5>添加图片</h5>
              </div>
              
            </Upload>
            
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="房东说"
          >
            <Input type="textarea" {...remarkProps} placeholder="" style={{width:400}}/>
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="是否上架"
          >
            <RadioGroup  {...publishStatusProps} >
              <Radio key="1" value='1'>是</Radio>
              <Radio key="2" value='-1'>否</Radio>
            </RadioGroup>
          </FormItem>

          <FormItem wrapperCol={{ span: 16, offset: 2 }} style={{ marginTop: 24 }}>
            <Button type="primary" loading={this.state.loading}  onClick={this.handleSubmit}>确定</Button>
          </FormItem>
        </Form>
        <Modal visible={this.state.priviewVisible} footer={null} onCancel={this.handleImgCancel}>
          <img alt="example" src={this.state.priviewImage} width="490"/>
        </Modal>
      </div>
    );
  }
});

Demo = Form.create()(Demo);
export default Demo




